<template>
  <actor-base :actor-id="actorId" v-if="actorId">
    <template v-slot:page-header>
      <div class="page-header" >
        <a-row type="flex" justify="space-between" align="middle">
          <a-col>
            <div class="page-header-content">
              <div class="avatar">
                <a-avatar size="large" icon="user"/>
              </div>
              <div class="content">
                <div class="content-title">
                  {{ timeFix }}，{{ name }}<span class="welcome-text">，{{ welcome }}</span>
                </div>
                <div>{{ otherInfo.position }} | {{ otherInfo.department }} - {{ otherInfo.team }} | {{ otherInfo.company }}</div>
              </div>
            </div>
          </a-col>
          <a-col>
            <div class="extra-content">
              <div class="stat-item">
                <a-statistic title="访问总数" :value="otherInfo.totalViewed" />
              </div>
              <div class="stat-item">
                <a-statistic title="今日访问" :value="otherInfo.todayViewed" />
              </div>
              <div class="stat-item">
                <a-statistic title="关注我的" :value="otherInfo.watched" />
              </div>
              <div class="stat-item">
                <a-statistic title="我的关注" :value="otherInfo.focus" />
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </template>
  </actor-base>
</template>

<script>

// 工具
import { timeFix } from '@/utils/util'

// 组件
import ActorBase from './actor-base'

// 数据
import { mapGetters } from 'vuex'

export default {
  name: 'Workplace',
  components: {
    ActorBase
  },
  data () {
    return {
      timeFix: timeFix()
    }
  },
  computed: {
    ...mapGetters([ 'actorId', 'name', 'welcome', 'otherInfo' ])
  }
}
</script>

<style lang="less" scoped>
 @import "../../components/customPageHeaderContent.less";

.page-header {
  margin-bottom: 24px;
  padding: 12px;
  background: #fff;
}

.mobile {
  .headerContent .title .welcome-text {
    display: none;
  }
}

.avatar {
  /deep/ .anticon-user {
    font-size: 72px
  }
}
</style>
